<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar  showBack title="选择城市" ></free-nav-bar>
		<!-- 服务地址输入框 -->
		<view class="flex p-2 border" >
			<view class="flex flex-1 bg-light-muted searchInput mr-1">
				<view class="flex flex-1">
					<text class="flex justify-center align-center iconfont icon-sousuo-1 pl-3 pr-1 font"
					style="margin-top: 5rpx;color: #CCCCCC;"></text>
					<input v-model="searchCity" 
					class="flex flex-1"
					style="margin-top: 14rpx;color: #3C8EFF;" type="text" value=""
					 placeholder-style="font-size:28rpx;color:#CCCCCC;padding-left:10rpx"
					 placeholder="搜索城市名" @confirm="sumit" />
					 <text v-if="searchCity" class="flex justify-center align-center iconfont icon-qingkong font pr-3"
					 style="margin-top: 5rpx;color: #CCCCCC;" @click="searchCity=''"></text>
				</view>
			</view>
			<view class="flex align-center justify-center px-3 font font-weight-bold noSelect"
			@click="clearReasultList">
				取消	
			</view>
		</view>
		
		<view style="height: 130rpx;" class="pl-2 mb-2">
			<view class="flex align-center"  style="height: 60rpx;">定位城市</view>
			<view v-if="cityName" class="border-blue flex align-center justify-center px-1 font font-weight-bold noSelect text-ellipsis">
				{{cityName}}
			</view>
		</view>
		
		<!-- 城市列表 -->
		<view class="ml-2" style="margin-right: 55rpx;">
			<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'"
			:scroll-into-view="scrollInto">
				<view v-if="resultList.length<1" v-for="(item,index) in cityList " :key="index" :id="'item-'+item.title" >
					<title-list :title="item.title" rowHeight="66"></title-list>
					<block v-for="(item2,index2) in item.lists" :key="index2">
						<list-item :title="item2" @click="setCityName(item2)"></list-item>
					</block>
				</view>
				
				<!-- 搜索结果列表 -->
				<view v-if="resultList.length>0">
					<view v-for="(item,index) in resultList" :key="index">
						<list-item :title="item" @click="setCityName(item)"></list-item>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		<!-- 侧边导航条 -->
		<view v-if="(resultList.length<1)" class="position-fixed right-0 flex flex-column" :style="'top:'+top+'px;'" style="width: 60rpx;bottom: 300rpx;z-index: 99;" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @touchend.stop="touchend">
			<view class="flex-1 flex align-center justify-center" 
			v-for="(item,index) in cityList" :key="index">
				<text class="font-sm text-primary">{{item.title}}</text>
			</view>
		</view>
		
		<view v-if="current" class="position-fixed rounded-circle border flex align-center justify-center"
		style="width: 150rpx;height: 150rpx;left: 300rpx;"
		:style="'top:'+300+'px;'">
			<text class="font-lg">{{current}}</text>
		</view>
		
	</view>
</template>

<script>
	// 自定义导航栏
	import freeNavBar from '@/components/common/nav-bar/free-nav-bar.vue';
	import titleList from '@/components/common/list/title-list.vue';
	import listItem from '@/components/common/list/list-item.vue';
	import allCity from '@/common/js/allCity.js';
	export default {
		mixins:[allCity],
		components: {
			freeNavBar,
			titleList,
			listItem,
		},
		data() {
			return {
				// 定位城市
				cityName:"",
				// 搜索城市
				searchCity:"",
				// 搜索结果
				resultList:[],
				// 是否在选择城市
				selectCity:false,
				top:0,
				scrollHeight:0,
				scrollInto:'',
				// 每一项字母的高度
				itemHeight:0,
				current:'',
			}
		},
		onLoad(e) {
			console.log('e',e);
			this.cityName = e.cityName
			this.mathList()
		},
		methods: {
			// 设置城市名
			setCityName(item){
				console.log('item',item);
				let address = ''
				try{
					address = uni.getStorageSync('address')
				}catch(e){
					console.log('error888888-------',e)
				}
				console.log('item1',address);
				address.cityName = item			
				console.log('item1',address);
				uni.setStorageSync('address',address)
				uni.navigateBack({
					delta:1
				})
				// 
				// this.address.location = item.location
			},
			// 计算字母条每项长度
			mathList(){
				let res = uni.getSystemInfoSync()
				this.top = res.statusBarHeight + uni.upx2px(88+122+142)
				this.scrollHeight = res.windowHeight - this.top
				let count = this.cityList.length
				this.itemHeight =  (this.scrollHeight-uni.upx2px(300)) /  count
			},
			touchstart(e){
				this.changeScrollInto(e)
			},
			touchmove(e){
				this.changeScrollInto(e)
			},
			touchend(e){
				this.current = ''
			},
			// 联动
			changeScrollInto(e){
				let Y = e.touches[0].pageY - this.top
				let index = Math.floor(Y / this.itemHeight)
				let item = this.cityList[index]
				if(item){
					this.scrollInto = 'item-'+item.title
					if(this.current !== item.title){
						this.current = item.title
						console.log('item',this.current);
						this.tapItem()
					}
				}
			},
			clearReasultList(){
				this.searchCity = ''
				this.resultList = []
			},
			// 震动音效
			tapItem(){
				// #ifdef APP-PLUS
				// if (uni.getSystemInfoSync().platform == "ios") {
				// 	let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
				// 	let impact = new UIImpactFeedbackGenerator();
				// 	impact.prepare();
				// 	impact.init(1);
				// 	impact.impactOccurred();
				// }
				if (uni.getSystemInfoSync().platform == "android") {
					uni.vibrateShort({});
				}
				// #endif
			},
			sumit(){
				if(this.searchCity === ''){
					return plus.nativeUI.toast('关键字不能为空')
					//  uni.showToast({
					// 	title:'关键字不能为空',
					// 	icon:'none'
					// })
				}
				this.resultList = []
				this.cityList.forEach(item=>{
					var item = item.lists.filter(item1=>{
						return item1.indexOf(this.searchCity) !== -1
					})
					this.resultList= [...this.resultList,...item]
				})
				
				if(this.resultList.length == 0){
					plus.nativeUI.toast('无该搜索词信息')
					// uni.showToast({
					// 	title:'无该搜索词信息',
					// 	icon:'none'
					// })
				}
			}
		}
	}
</script>

<style scoped="scss">
.searchInput{
	border-radius: 35rpx;
	height: 69rpx;
}
.noSelect {
	height: 70rpx;
	color: #3C8EFF;
	width:fit-content;
	width:-webkit-fit-content;
	width:-moz-fit-content;
}
.border-blue {
	border-width: 1rpx;
	border-style: solid;
	border-right-color: #3C8EFF;
}

</style>
